<nz-drawer
  [nzBodyStyle]="{ overflow: 'auto' }"
  [nzWidth]="650"
  [nzVisible]="drawerVisible"
  [nzTitle]="'导入任务'"
  [nzFooter]="footerTpl"
  (nzOnClose)="closeDrawer()"
  (nzVisibleChange)="onVisibleChange($event)"
>
  <form nz-form *nzDrawerContent [formGroup]="form">
    <div nz-row [nzGutter]="8">
      <div nz-col nzSpan="24">
        <nz-form-item class="mb-4">
          <nz-form-label>选择模板</nz-form-label>
          <nz-form-control nzErrorTip="请选择一个模板！">
            <nz-select name="template" [nzPlaceHolder]="'请选择一个模板以加载任务'" #templateSelect
                       [formControlName]="'template'" [nzLoading]="loadingTemplates">
              <nz-option *ngFor="let template of templates; let i = index;" [nzLabel]="template.name | safeString"
                         [nzValue]="template.id"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-divider></nz-divider>
        <span nz-typography class="fw-bold">已选择任务 ({{tasks.length}})</span>
        <ul nz-list nzBordered class="mt-4" [nzDataSource]="tasks" [nzLoading]="loadingData"
            [nzNoResult]="'未选择模板！请选择一个模板以加载任务。'">
          <li nz-list-item *ngFor="let task of tasks; let i = index;">
            <ul nz-list-item-actions>
              <nz-list-item-action>
                <a (click)="removeTask(i)">移除</a>
              </nz-list-item-action>
            </ul>
            {{task.name}}
          </li>
        </ul>

      </div>
    </div>
  </form>

  <ng-template #footerTpl>
    <div style="float: right">
      <button nz-button style="margin-right: 8px;" (click)="closeDrawer()">取消</button>
      <button nz-button nzType="primary" (click)="importFromTemplate()" [nzLoading]="importing">导入</button>
    </div>
  </ng-template>
</nz-drawer>
